<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="zh">

<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<meta name="Keywords" content="简单的XHTML页面" />
	<meta name="Description" content="这是一个简单的XHTML页面" />
	<title>简单的XHTML页面</title>
<link rel="stylesheet" type="text/css" href="http://a.tbcdn.cn/app/dp/css/global.css">
<script type="text/javascript" src="http://a.tbcdn.cn/s/yui/3.4.1/build/yui/yui-min.js"></script>
</head>
<body>

<style>
/*--标准--*/
.t-tabview {position:relative;text-align:left;width:100%;}
.t-tabview .tab-nav {width:auto;*width:100%;border-color:#2647A0;border-style:solid;border-width:0 0 5px 0;}
.t-tabview .tab-nav li {float:left;border:1px solid #999999;color:black;padding:5px;margin:0 0.16em 0 0}
.t-tabview .tab-nav li a,
.t-tabview .tab-nav li a:link,
.t-tabview .tab-nav li a:visited,
.t-tabview .tab-nav li a:hover {color:black;text-decoration:none;}
.t-tabview .tab-nav li.selected a,
.t-tabview .tab-nav li.selected a:link,
.t-tabview .tab-nav li.selected a:visited,
.t-tabview .tab-nav li.selected a:hover {color:white;text-decoration:none;}
.t-tabview .tab-nav li.selected {background-color:#2647A0;border:1px solid #2647A0;font-weight:bold;}
.t-tabview .tab-content {border:1px solid gray;}


/*--标准--*/
.t-slide {position:relative;text-align:left;width:600px;overflow:hidden;}
.t-slide .tab-nav {position:absolute;right:10px;bottom:10px;border-color:#2647A0;z-index:2;}
.t-slide .tab-nav li {float:left;}
.t-slide .tab-nav li a {color:white;background-color:red;color:white;margin:5px;padding:2px 5px;}
.t-slide .tab-nav li.selected a{background-color:#2647A0;font-weight:bold;}
.t-slide .tab-content {width:600px;height:200px;overflow:hidden;z-index:1;}
.t-slide .tab-content img {width:600px;height:200px;}

/*--标准2-*/
.t-slide-2 {position:relative;text-align:left;width:600px;overflow:hidden;}
.t-slide-2 .tab-nav {position:absolute;right:10px;bottom:10px;border-color:#2647A0;z-index:2;}
.t-slide-2 .tab-nav li {float:left;}
.t-slide-2 .tab-nav li a {color:white;background-color:red;color:white;margin:5px;padding:2px 5px;}
.t-slide-2 .tab-nav li.selected a{background-color:#2647A0;font-weight:bold;}
.t-slide-2 .tab-content {width:100%;height:400px;overflow:hidden;z-index:1;}
.t-slide-2 .tab-content img {width:600px;height:400px;}


</style>


<div id="J_tab_3" class="t-slide-2 mt20">
  <ul class="tab-nav clearfix">
  </ul>
  <div class="tab-content">
	<div class="tab-pannel"><p><img src="http://a.tbcdn.cn/app/dp/s/slide/demo/img/s1.jpg" /></p></div>
    <div class="tab-pannel"><p><img src="http://a.tbcdn.cn/app/dp/s/slide/demo/img/s2.jpg" /></p></div>
    <div class="tab-pannel"><p><img src="http://a.tbcdn.cn/app/dp/s/slide/demo/img/s3.jpg" /></p></div>
	<div class="tab-pannel"><p><img src="http://a.tbcdn.cn/app/dp/s/slide/demo/img/s4.jpg" /></p></div>
  </div>
</div>



        <div id="div">动画文字</div>












</body>
<script>
//runtime
YUI({
	modules:{
		'slide':{
			fullpath:'http://taobao-wd.github.com/slide/slide.js',
			requires:['node','anim']
		}
	}
}).use('slide','dump',function(Y){





	new Y.Slide('J_tab_3',{
		autoSlide:false,
		eventype:'click',
		ease:'easeOut',
		effect:'v-slide',
		autoSlide:true,
		timeout:3000,
		speed:0.5,
		hoverStop:true
	});
});
</script>
</html>
